<template>
  <div>
    <div class="i-layout-page-header mb20">
      <div class="i-layout-page-header">
        <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="roleData"
        :model="roleData"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
	    <Row type="flex" :gutter="24">
	      <Col v-bind="grid">
	        <FormItem label="关键字：" label-for="keywords">
	          <Input
	            search
	            enter-button
	            placeholder="请输入关键字"
	            v-model="formValidate.keywords"
	            @on-search="userSearchs"
	          />
	        </FormItem>
	      </Col>
	    </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <Button type="primary" @click="menusAdd('新增')" icon="md-add">新增</Button>
          </Col>
        </Row>
      </Form>
      <Table
        :columns="columns"
        :data="tableData"
        ref="table"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
        @on-select="handleSelectRow"
        @on-select-cancel="handleCancelRow"
        @on-select-all="handleSelectAll"
        @on-select-all-cancel="handleSelectAll"
        class="orderData mt25"
      >
	    <template slot-scope="{ row, index }" slot="id">
	      {{index+1}}
	    </template>
        <template slot-scope="{ row, index }" slot="cover">
          <img :src="row.cover" style="width:60px;height:60px;"/>
        </template>
		
		<template slot-scope="{ row, index }" slot="cover">
		  <div v-viewer style="display: flex;flex-direction: row;justify-content: center;">
		    <div class="tabBox_img">
		      <img v-lazy="row.cover" />
		    </div>
		  </div>
		</template>
        <template slot-scope="{ row, index }" slot="parent_name">
          <span v-if="row.parent_name == null">-</span>
          <span v-else>{{row.parent_name}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="description">
          <span style="overflow: hidden;white-space: nowrap;display: block;text-overflow: ellipsis;" :title="row.description">{{row.description}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <a @click="edit(row)">编辑</a>
          <Divider type="vertical" />
      	  <a @click="del(row)">删除</a>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="page.total"
          :current="page.pageNum"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="page.pageSize"
          @on-page-size-change="limitChange"
        />
      </div>
    </Card>
    <menus-form
      :formValidate="formValidate"
      :titleFrom="titleFrom"
      @getList="getList"
      @selectRule="selectRule"
      ref="menusForm"
      @clearFrom="clearFrom"
    ></menus-form>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { ListApi } from '@/api/book';
import formCreate from '@form-create/iview';
import menusForm from './components/menusForm';
export default {
  name: 'systemMenus',
  data() {
    return {
      tabconfig: { children: 'children', reserve: true, accordion: true },
      spinShow: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      roleData: {
        is_show: '',
        keyword: '',
      },
      loading: false,
      tableData: [],
      FromData: null,
      icons: '',
      formValidate: {},
      titleFrom: '',
      modalTitleSs: '',
	  columns: [
		{
	      title: '序号',
	      align: 'center',
	      slot: 'id',
	      width: 80,
	    },
		{
	      title: '分类',
	      align: 'center',
	      key: 'cate_id_name',
	      width: 100,
	    },
		{
	      title: '封面',
	      align: 'center',
	      slot: 'cover',
	      width: 100,
	    },
		{
	      title: 'ISBN',
	      align: 'center',
	      key: 'isbn',
	      width: 100,
	    },
		{
	      title: '书名',
	      align: 'center',
	      key: 'title',
	      width: 100,
	    },
		{
	      title: '作者',
	      align: 'center',
	      key: 'author',
	      width: 100,
	    },
		{
	      title: '出版社',
	      align: 'center',
	      key: 'publisher',
	      width: 100,
	    },
		{
	      title: '发布日期',
	      align: 'center',
	      key: 'publish_date',
	      width: 100,
	    },
		{
	      title: '库存',
	      align: 'center',
	      key: 'stock_quantity',
	      width: 100,
	    },
		{
	      title: '简介',
	      align: 'center',
	      slot: 'description',
	      minWidth: 150,
	    },
		{
	      title: '备注',
	      align: 'center',
	      key: 'notes',
	      minWidth: 150,
	    },
	    {
	      title: '操作',
	      slot: 'action',
	      fixed: 'right',
	      minWidth: 100,
	      align: 'center',
	    },
	  ],
	  page: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
	  keywords:''
    };
  },
  components: { menusForm, formCreate: formCreate.$form() },
  computed: {
    ...mapState('admin/layout', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 查看详情
    detail(row) {
		console.info(111)
	  this.$router.push({ path: '/admin/contract/detail/' + row.id });
    },
    // 请求列表
    getList() {
      this.formValidate = Object.assign({}, this.$options.data().formValidate);
      this.getData();
    },
    selectRule(data) {
      this.formValidate.menu_name = data.real_name;
      this.formValidate.methods = data.method;
      this.formValidate.api_url = data.rule;
    },
    // 清除表单数据
    clearFrom() {
      this.formValidate = Object.assign({}, this.$options.data().formValidate);
    },
    // 删除
    del(row) {
      let delfromData = {
        title: '删除数据',
        url: `/book/del/${row.id}`,
        method: 'GET',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getData();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 获取详情
    getDetails(id) {
		
    },
    // 编辑
    edit(row, title, index) {
		this.titleFrom = '编辑';
        this.formValidate = {};
		this.formValidate = {
    		id:row.id,
    		cate_id:row.cate_id,
    		cover:row.cover,
    		tags:row.tags,
    		isbn:row.isbn,
    		title:row.title,
    		author:row.author,
    		publisher:row.publisher,
    		publish_date:row.publish_date,
    		description:row.description,
    		notes:row.notes,
    		stock_quantity:row.stock_quantity,
		};
        this.$refs.menusForm.valids = false;
        this.$refs.menusForm.getAddFrom(row.id);
	    this.$refs.menusForm.modals = true;
		if(row.attach && row.attach != 'null'){
			this.$refs.menusForm.files = JSON.parse(row.attach);
		}
    },
    // 添加
    menusAdd(title) {
      this.formValidate = {};
      this.$refs.menusForm.modals = true;
      this.$refs.menusForm.valids = false;
      // this.formValidate = Object.assign(this.$data, this.$options.formValidate());
      this.titleFrom = title;
      this.formValidate.auth_type = 1;
      this.formValidate.is_show = 0;
      this.formValidate.is_show_path = 0;
    },
    // 新增页面表单
    // getAddFrom () {
    //     this.spinShow = true;
    //     addMenus(this.roleData).then(async res => {
    //         this.FromData = res.data;
    //         this.$refs.menusForm.modals = true;
    //         this.spinShow = false;
    //     }).catch(res => {
    //         this.spinShow = false;
    //         this.$Message.error(res.msg);
    //     })
    // },
    // 列表
    getData() {
		// this.page.pageNum = res === 1 ? 1 : this.page.pageNum;
		this.loading = true;
		ListApi({
		  page: this.page.pageNum,
		  limit: this.page.pageSize,
		  keywords:this.keywords
		})
		  .then(async (res) => {
		    let data = res.data;
		    this.tableData = data.list;
		    this.page.total = data.count;
		    this.loading = false;
		  })
		  .catch((res) => {
		    this.loading = false;
		    this.$Message.error(res.msg);
		  });
    },
	pageChange(index) {
	  this.page.pageNum = index;
	  this.getData();
	},
	limitChange(limit) {
	  this.page.pageSize = limit;
	  this.getData();
	},
    // 关闭按钮
    cancel() {
      this.$emit('onCancel');
    },
	//  选中某一行
	handleSelectRow(selection, row) {
	  this.isDel(selection);
	  this.selectedIds.add(row.id);
	  this.$nextTick(() => {
	    //确保dom加载完毕
	    this.setChecked();
	  });
	},
	//  取消某一行
	handleCancelRow(selection, row) {
	  this.isDel(selection);
	  this.selectedIds.delete(row.id);
	  this.$nextTick(() => {
	    //确保dom加载完毕
	    this.setChecked();
	  });
	},
	//全选和取消全选时触发
	handleSelectAll(selection) {
	  if (selection.length === 0) {
	    //获取table的数据；
	    let data = this.$refs.table.data;
	    data.forEach((item) => {
	      if (this.selectedIds.has(item.id)) {
	        this.selectedIds.delete(item.id);
	      }
	    });
	  } else {
	    selection.forEach((item) => {
	      this.selectedIds.add(item.id);
	    });
	  }
	  this.isDel(selection);
	  this.$nextTick(() => {
	    //确保dom加载完毕
	    this.setChecked();
	  });
	},
	userSearchs(){
		this.keywords = this.formValidate.keywords;
		this.page.pageNum = 1;
		this.getData();
		console.info(this.formValidate)
	}
  },
};
</script>

<style scoped lang="stylus">
.vxeTable {
  >>> .vxe-table--header-wrapper {
    background: #fff !important;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
